<template>
	<view class="container">

		<view class="item_div" v-for="(item,index) in data_list" :key="item.id">
			<view>{{item.title}}</view>
			<radio-group style="margin: 16rpx 0 20rpx 0;display: flex;" @change="onRadioChange($event,index)">
				<label style="display: flex;align-items: center;">
					<radio style="transform:scale(0.8);" :checked="item.value == 1" value="1"></radio>
					是
				</label>
				<label style="display: flex;align-items: center;margin: 0 0 0 100rpx;">
					<radio style="transform:scale(0.8)" :checked="item.value == 0" value="0"></radio>
					否
				</label>
			</radio-group>
			<view style="width: 100%;height: 1rpx;background-color: #eeeeee;"></view>
		</view>

		<view style="margin: 48rpx 0 0 24rpx;display: flex;align-items: baseline;">
			客户签名
			<view style="color: #bcbcbc;font-weight: normal;font-size: 22rpx;">(*签名后请点击"保存签名",方能生效)</view>
		</view>

		<!-- 签名组件 -->
		<view style="border: solid 1rpx #dddddd;border-radius: 8rpx;margin: 20rpx 24rpx 0 24rpx;height: 280rpx;">
			<l-signature ref="signatureRef" style="height: 100%;"></l-signature>
		</view>

		<view class="op_btn_div">
			<view class="btn1" @click.stop="onSaveSign()">保存签名</view>
			<view class="btn2" @click.stop="onResetSign()">重写签名</view>
			<view class="btn3" @click.stop="onOk()">提交评价✔</view>
		</view>

		<!-- 占位空间 -->
		<view style="width: 100rpx;height: 44rpx;"></view>

	</view>
	</view>
</template>

<script>
	const uploadImage = require('@/util/oss/upload.js')
	export default {
		data() {
			return {
				install_id: '', // 传过来的安装单id
				data_list: [], // 页面数据列表
				sign_url: '', // 签名上传的图片url
			}
		},

		onLoad(opts) {
			// uni.setNavigationBar({ show: false })
			this.install_id = opts.install_id
			// console.log('this.install_id = ', this.install_id);
		},

		mounted() {
			this.getEvaluate()
		},

		methods: {

			onOk() {
				let that = this
				if (!this.install_id) {
					uni.showToast({ icon: 'none', title: `当前无需评价`, duration: 2500 })
					return
				}
				if (!this.sign_url) {
					uni.showToast({ icon: 'none', title: '请签名并保存' })
					return
				}
				// 生成问卷结果的json数据
				let arr = []
				this.data_list.map((item, index) => {
					arr.push({ name: item.name, value: item.value })
				})
				// console.log('问卷结果 = ', JSON.stringify(arr));
				let obj = {
					install_id: this.install_id,
					signature: this.sign_url,
					sign_arr: JSON.stringify(arr)
				}
				uni.showModal({
					title: '提示',
					content: '确认提交以上数据？',
					success: (res) => {
						if (res.confirm) {
							that.postEvaluate(obj)
						}
					}
				})
			},

			// 保存签名 
			onSaveSign() {
				let that = this
				this.$refs.signatureRef.canvasToTempFilePath({
					success: (res) => {
						// 是否为空画板 无签名
						console.log(res.isEmpty)
						// 生成图片的临时路径
						// H5 生成的是base64
						let url = res.tempFilePath
						// console.log('签名完成的url = url = ', url);

						uni.showLoading({ title: '保存签名...', mask: true })
						uploadImage(url, 'hhsaz/',
							(res) => {
								uni.hideLoading()
								uni.showToast({ title: '签名成功', icon: 'none' })
								console.log("上传成功结果 = ", res)
								that.sign_url = res
							},
							(res) => {
								uni.hideLoading()
								// uni.showToast({ title: '上传失败', icon: 'none' })
								uni.showModal({
									title: '上传失败',
									content: `错误信息：${JSON.stringify(res)}`,
									showCancel: false,
									success: (res) => {
										if (res.confirm) {}
									}
								})
							}
						)

					}
				})
			},

			// 重置签名
			onResetSign() {
				this.$refs.signatureRef.clear()
			},

			// 单选框改变事件
			onRadioChange(event, index) {
				// console.log('event = ', event);
				// console.log('index = ', index);
				this.data_list[index].value = event.detail.value
			},

			// 接口:回访数据
			async getEvaluate() {
				let that = this
				uni.showLoading({ title: '加载中', mask: true, })
				let res = await that.$getEvaluate({})
				// console.log('$getEvaluate.res = ', res);
				if (res.code == 1) {
					this.data_list = res.data
				} else {
					uni.showToast({ icon: 'none', title: res.msg ? res.msg : '获取数据失败' })
				}
			},

			// 接口:提交回访数据 
			async postEvaluate(obj) {
				let that = this
				uni.showLoading({ title: '加载中', mask: true, })
				let res = await that.$postEvaluate(obj)
				console.log('$postEvaluate.res = ', res);
				if (res.code == 1) {
					uni.redirectTo({ url: '/pages/evaluate/evaluate_res' })
				} else {
					uni.showToast({ icon: 'none', title: res.msg ? res.msg : '获取数据失败' })
				}
			},

		}
	}
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		font-size: 30rpx;
		font-weight: bold;
	}

	.item_div {
		display: flex;
		flex-direction: column;
		margin: 36rpx 24rpx 0 24rpx;
	}

	/* 操作按钮容器 */
	.op_btn_div {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20rpx 0 0 0;
	}

	.btn1 {
		width: 166rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background-color: deepskyblue;
		color: white;
		margin: 0 0 0 0rpx;
		border-radius: 10rpx;
	}

	.btn2 {
		width: 166rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background-color: yellowgreen;
		color: white;
		margin: 0 0 0 20rpx;
		border-radius: 10rpx;
	}

	.btn3 {
		width: 188rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		background-color: orangered;
		color: white;
		margin: 0 0 0 20rpx;
		border-radius: 10rpx;
	}
</style>